<template>
  <table-option
    :tableData="tableData"
    :tableColumnOptions="tableColumnOptions"
    :currentPage="currentPage"
    :pageSize="pageSize"
    :total='total'
    @setCurrent='setCurrent'
    @setPageSize='setPageSize'
  ></table-option>
</template>

<script>
import { getSupplier } from "@/api/supplier";
import { onMounted, reactive, ref } from "vue";
import tableOption from "@/components/tableOption.vue";
export default {
  components: { tableOption },
  setup() {
    const tableColumnOptions = reactive([
      { label: "供应商名称", prop: "name" },
      { label: "联系人", prop: "linkman" },
      { label: "联系电话", prop: "mobile" },
      { label: "备注", prop: "remark" },
      { label: "操作", prop: "" },
    ]);
    // 当前页
    let currentPage = ref(1);
    // 每页条数
    let pageSize = ref(10);
    // 总数量
    let total = ref(0);
    const tableData = ref([]);
    const getSupplierList = async () => {
      let { msg: { rows, count },
      } = await getSupplier({
        currentPage: currentPage.value,
        pageSize: pageSize.value,
      });
      console.log(rows,'rows')
      tableData.value = rows;
      total.value = count;
    };
    onMounted(() => {
      getSupplierList();
    });

    const setCurrent = (current) => {
      currentPage.value = current;
      getSupplierList();
    };
    const setPageSize = (current) => {
      pageSize.value = current;
      getSupplierList();
    };
    return {
      tableData,
    //   ref,
      currentPage,
      pageSize,
      total,
      setPageSize,
      setCurrent,
      tableColumnOptions
    };
  },
};
</script>

<style lang="less" scoped>
</style>